<template>
	<view class="page_main page_render" :class="{ can_show: render_req }">
		<pagelogin ref="pagelogin" @loginready="pagerefresh" @initcallback="com_pagelogin_initcallback($event)" need_login="0">
			<diynav ref="diynav" :navstyle="{ background: '#383950' }" isFixed isdiy hasHeight @settop="set_pagetop($event)">
				<template slot="diy">
					<view class="index_message">
						<view class="title">我的</view>
					</view>
				</template>
			</diynav>

			<view class="user_view">
				<view class="user_info com_lr" @click="login_judge()">
					<view class="photo">
						<image class="img" :src="getPhoto()" mode="aspectFill"></image>
					</view>

					<block v-if="USER_LOGIN">
						<view class="info">
							<view class="stauts">
								<!-- {{ changePhone(USER_MSG.user_phone) }} -->
								{{ USER_MSG.nickname }}
							</view>
							<view class="role" :style="{ background: back_user(1) }">
								{{ back_user(0) }}
							</view>
						</view>
					</block>

					<block v-else>
						<view class="b_tt">未登录</view>
					</block>
				</view>

				<view class="page_content page_card_p">
					<view class="page_card" v-if="objJudge(page_binding_list)">
						<view class="card_tt">
							<view class="tt">设备</view>
							<view class="dd" @click="unbindChange()">{{ show_unbind ? '取消编辑' : '编辑' }}</view>
						</view>
						<view class="card">
							<myToolList
								pagetype="user_device"
								:showForm="page_binding_list"
								:show_unbind="show_unbind"
								@formClick="myToolsClick($event)"
								@unbindClick="unbindClick($event)"
							></myToolList>
						</view>

						<view class="adf_content" v-if="objJudge(adf_list)">
							<myswiper
								:LIST="adf_list"
								circular
								autoplay
								:interval="4000"
								:duration="800"
								width="690"
								height="260"
								radius="20"
								imgClickMode="emit"
								@imgClick="swiper_click($event)"
							></myswiper>
						</view>
					</view>

					<view class="page_card">
						<view class="card_tt">
							<view class="tt">服务帮助</view>
						</view>
						<view class="card">
							<view class="service_list">
								<block v-for="(_vv, _ii) in server_list" :key="_ii">
									<!-- <view class="service_list_view" v-if="_vv.key_type == 'customer'">
										<image class="img_box" :src="_vv.icon"></image>
										<text class="tt">
											{{ _vv.title }}
										</text>

										<button open-type="contact" class="wechat_kefu" hover-class="btn-hover"></button>
									</view>
                                    v-else -->
									<view class="service_list_view" @click="click_view(_vv)" v-if="_vv.server_show">
										<image class="img_box" :src="_vv.icon"></image>
										<text class="tt">
											{{ _vv.title }}
										</text>
									</view>
								</block>
							</view>
						</view>
					</view>
				</view>
				<view class="logout_btn" v-if="USER_LOGIN" @click="logout_fun('refresh')">退出登录</view>
			</view>

			<view class="version">v{{ COMMON_VAR.versionCode_show }}</view>
		</pagelogin>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	data() {
		return {
			change_var: {},

			scrollTop: 0,
			render_component_init: false,
			page_render: false,
			page_title: '',
			render_req: false,
			nextreq: true,
			page_id: 0,

			page_form: {},
			page_list: [],
			loadingstatus: 0,
			page_binding_list: [],
			server_list: [
				{
					key_type: 'order',
					icon: '/static/images/user_1.png',
					title: '支付订单',
					server_show: true,
				},
				// {
				// 	key_type: 'bms_battery_notice',
				// 	icon: '/static/images/user_2.png',
				// 	title: '锂电池须知',
				// },
				// {
				// 	key_type: 'bms_notice',
				// 	icon: '/static/images/user_3.png',
				// 	title: 'BMS须知',
				// },
				{
					key_type: 'bms_about_us',
					icon: '/static/images/user_4.png',
					title: '关于我们',
					server_show: true,
				},
				{
					key_type: 'bms_help_list',
					icon: '/static/images/user_6.png',
					title: '帮助中心',
					server_show: true,
				},
				{
					key_type: 'customer',
					icon: '/static/images/user_5.png',
					title: '客服中心',
					server_show: true,
				},
			],

			show_unbind: false,
			adf_list: [],
		};
	},
	created() {},
	onLoad() {
		this.init_pagedata();
	},
	onShow() {
		this.com_onshow_fun();
	},
	onHide() {
		this.com_page_hide(this);
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onPullDownRefresh() {
		this.pagerefresh(1);
	},
	onShareAppMessage(res) {},
	onShareTimeline(res) {},
	methods: {
		//页面刷新
		pagerefresh(type = 0) {
			let _this = this;
			_this.startPulldownJudge(type);
			_this.com_page_show(_this);
			_this.com_loading_fun();
			_this.init_form();
			_this.init_adf();
			_this.init_req_config();
		},
		init_form() {
			let _this = this;
			_this.page_binding_list = uni.getStorageSync('page_binding_list') || [];
			_this.com_loading_fun({ mode: 0 });
		},
		swiper_click() {
			let _this = this;
			let FIRST = _this.page_binding_list.find((item, index) => {
				return index == 0;
			});
			_this.goweburl_f(`/pagesD/shop/user_warranty?dev_id=${FIRST.id}`);
			// console.log(FIRST);
		},
		async init_adf() {
			let _this = this;
			let { state = 0, data = [] } = await _this.com_getdata({
				url: '/banner/list',
				data_handle_on: false,
				method: 'GET',
				data: {
					pos: 'BMS小程序个人中心页',
				},
			});
			if (state == 1) {
				_this.adf_list = data;
			} else {
				_this.adf_list = [];
			}
		},
		init_req_config() {
			let _this = this;
			_this.com_getdata({
				url: '/base/config',
				data: {
					config_key: 'bms_base_kefu',
				},
				data_fun: function (v) {
					if (v.state == 1) {
						_this.server_list.forEach(element => {
							if (element.key_type == 'customer') {
								element['server_show'] = v.info.config_value == 0 ? false : true;
							}
						});
					}
				},
			});
		},
		back_user(tt = 0) {
			// role_config[USER_MSG.user_status].color

			let _this = this;
			let role_config = {
				0: {
					tt: '普通用户',
					color: '#1FD5CA',
				},
				1: {
					tt: '管理员',
					color: '#FF5656',
				},
				2: {
					tt: '经销商',
					color: '#1F6ED5',
				},
				3: {
					tt: '特殊用户',
					color: '#1FD5CA',
				},
			};
			let status = _this.USER_MSG.user_status;
			if (_this.objJudge(status) || status == 0) {
				if (tt == 0) {
					return role_config[status].tt;
				} else if (tt == 1) {
					return role_config[status].color;
				}
			}
		},
		login_judge() {
			if (this.USER_LOGIN) {
				// this.goweburl_f('/pagesA/user/user_set_info')
			} else {
				this.$refs.pagelogin.page_login();
				// this.zhudon_login('/pagesA/user/user_set_info')
			}
		},
		getPhoto(tt = 1) {
			let _this = this;
			if (_this.USER_LOGIN) {
				if (_this.USER_MSG && _this.objJudge(_this.USER_MSG.user_head)) {
					return _this.USER_MSG.user_head;
				} else {
					return '/static/images/login_in.png';
				}
			} else {
				// return '/static/images/login_no.png'
				return '/static/images/login_in.png';
			}
		},

		click_view(view) {
			let _this = this;
			let type = view.key_type;
			switch (type) {
				case 'order':
					_this.goweburl_f('/pagesD/shop/user_order');
					break;
				case 'bms_battery_notice':
					_this.goweburl_f(`/pagesC/index/com_article?id=${type}`);
					break;
				case 'bms_notice':
					_this.goweburl_f(`/pagesC/index/com_article?id=${type}`);
					break;
				case 'bms_about_us':
					_this.goweburl_f(`/pagesC/index/com_article?id=${type}`);
					break;
				case 'bms_help_list':
					_this.goweburl_f(`/pagesC/index/user_help`);
					break;
				case 'customer':
					wx.openCustomerServiceChat({
						extInfo: { url: 'https://work.weixin.qq.com/kfid/kfc48fc530b541712b8' },
						corpId: 'wwbffeed0d77f3a4ac',
						success(res) {
							console.log(res);
						},
						fail(res) {
							console.log(res);
						},
					});
					break;
			}
		},
		unbindChange() {
			this.show_unbind = !this.show_unbind;
		},
		unbindClick(event) {
			let _this = this;
			let { item, pagetype } = event;
			_this.unbind_req(item.bike_battery_id);
		},

		async unbind_req(dev_id) {
			let _this = this;
			let f = await this.com_modal({
				title: '提示',
				content: `确认解除当前设备【${dev_id}】的绑定吗？`,
			});
			if (!f) return;

			if (!_this.com_loading({ status: 1, title: '解绑中...', throttle: true })) return;
			let response = await _this.com_getdata({
				url: `/user/unbind`,
				data: {
					dev_id,
				},
				id_name: 'user_id',
			});

			_this.com_loading_fun({
				mode: 2,
				k: 'nextreq',
				title: '解绑成功',
				hide_time: 300,
				response,
				suc_icon: 'success',
				fail_icon: 'none',
				show_fail_msg: true,
				suc_callback: data => {
					return () => {
						_this.com_onshow_fun();
					};
				},
				fail_callback: data => {},
			});
		},
	},
};
</script>
<style lang="scss">
.user_view {
	.user_info {
		display: flex;
		padding: 48rpx 0;
		position: relative;

		.b_tt {
			font-size: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #ffffff;

			margin-left: 28rpx;
			display: flex;
			align-items: center;
		}

		.photo {
			flex-shrink: 0;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			overflow: hidden;

			.img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.info {
			// padding-left: 28rpx;
			// width: calc(100% - 130rpx);
			// padding-right: 130rpx;

			padding: 0 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				// height: 76rpx;
				line-height: 44rpx;
				display: flex;
				align-items: center;
			}

			.u_tag {
				height: 44rpx;
				background: var(--status_b);
				color: var(--status_c);

				border-radius: 22rpx;
				padding: 0 16rpx;
				font-size: 24rpx;
				line-height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				margin-left: 10rpx;
				flex-shrink: 0;
			}

			.stauts {
				display: flex;

				// margin-top: 10rpx;
				font-size: 44rpx;
				font-weight: bold;
				color: #ffffff;
			}

			.role {
				margin-top: 12rpx;
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 24rpx;
				border-radius: 22rpx;
				// display: inline-flex;
				// align-items: center;
				// justify-content: center;

				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}

		.sign_in {
			position: absolute;
			right: -30rpx;
			top: 78rpx;

			padding: 0 18rpx 0 30rpx;
			height: 56rpx;
			line-height: 56rpx;
			background: var(--status_b);
			color: var(--status_c);
			border-radius: 28rpx 0 0 28rpx;
		}
	}
}

.tools_list {
	margin-bottom: 0;
}

.logout_btn {
	margin: -10rpx 30rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	height: 100rpx;
	background: #3f425a;
	border-radius: 10rpx;

	font-size: 28rpx;
	font-weight: 800;
	color: #ff5656;
}
.page_card {
	.card_tt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.dd {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
		}
	}
}
.service_list {
	display: flex;
	flex-wrap: wrap;
	// align-items: center;
	// justify-content: space-between;
	padding: 26rpx 0 30rpx;

	.service_list_view {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;

		position: relative;

		&:nth-child(n + 5) {
			margin-top: 42rpx;
		}

		.img_box {
			width: 100rpx;
			height: 100rpx;
		}

		.tt {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.wechat_kefu {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
}
.version {
	// position: sticky;
	// left: 0;
	// bottom: 0;
	font-size: 24rpx;
	font-weight: 400;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60rpx;
}
.adf_content {
	margin-top: 20rpx;
}
</style>
